<template>
	<view class="page">
		<my-navbar
			:bgUrl="`${$imgurl}/static/index-bg.jpg`"
			:logo="`${$imgurl}/static/logo.png`"
			:logoText="`${$imgurl}/static/logo-text.png`"
			:scrollTop="scrollTop"
		/>
		<view class="box search-box">
			<navigator url="/pages/goods/search" hover-class="on" class="search">
				<image :src="`${$imgurl}/static/icon-search.png`" mode=""></image>
				<input type="text" disabled placeholder="谜礼答题" />
				<view class="btn">
					搜索
				</view>
			</navigator>
		</view>
		<view class="box swiper-box">
			<up-swiper
				
				:list="banner"
				indicator
				indicatorMode="line"
				height="216rpx"
				radius="16rpx"
				circular
				indicatorActiveColor="#F5493D"
			></up-swiper>
		</view>
		<view class="box nav-box">
			<navigator hover-class="on" :url="`/pages/goods/category?id=`+item.id" class="item" v-for="(item,index) in category">
				<image :src="item.pic" mode=""></image>
				{{item.cate_name}}
			</navigator>
			<navigator hover-class="on" url="/pages/goods/category" class="item">
				<image :src="`${$imgurl}/static/icon-index-tab-10.png`" mode=""></image>
				全部分类
			</navigator>
		</view>
		<view class="box wanfa-box" :style="`background: url(${$imgurl}/static/wanfa-bg.png); background-size: 100% 100%;`">
			<view class="row">
				<navigator url="/pages/user/rules?type=0" class="left" :style="`background: url(${$imgurl}/static/wanfa-1.png); background-size: 100% 100%;`">
					<view class="h1">
						好友送礼，全凭你懂我
					</view>
					<view class="span">
						查看玩法说明
					</view>
				</navigator>
				<view  @click="goTab('/pages/gift/index',1)" class="right" :style="`background: url(${$imgurl}/static/wanfa-2.png); background-size: 100% 100%;`">
					<image :src="`${$imgurl}/static/wanfa-2-t.png`" mode="heightFix"></image>
					<view class="span">
						点击立即参与
					</view>
				</view>
			</view>
			<view class="row">
				<navigator url="/pages/user/rules?type=1" class="left" :style="`background: url(${$imgurl}/static/wanfa-3.png); background-size: 100% 100%;`">
					<view class="h1">
						抽奖送礼，抽象好谜货
					</view>
					<view class="span">
						查看玩法说明
					</view>
				</navigator>
				<view @click="goTab('/pages/lottery/index',1)" class="right" :style="`background: url(${$imgurl}/static/wanfa-4.png); background-size: 100% 100%;`">
					<image :src="`${$imgurl}/static/wanfa-4-t.png`" mode="heightFix"></image>
					<view class="span">
						点击立即参与
					</view>
				</view>
			</view>
			<view class="row">
				<navigator url="/pages/user/rules?type=2" class="left" :style="`background: url(${$imgurl}/static/wanfa-5.png); background-size: 100% 100%;`">
					<view class="h1">
						全民解题，智赢抵扣金
					</view>
					<view class="span">
						查看玩法说明
					</view>
				</navigator>
				<view @click="goTab('/pages/bonus/index',1)" class="right" :style="`background: url(${$imgurl}/static/wanfa-6.png); background-size: 100% 100%;`">
					<image :src="`${$imgurl}/static/wanfa-6-t.png`" mode="heightFix"></image>
					<view class="span">
						点击立即参与
					</view>
				</view>
			</view>
		</view>
		
		<view class="box mhzq-box">
			<view class="title">
				<view class="left">
					<image :src="`${$imgurl}/static/icon-index-mhzq-title.png`" mode=""></image>
					甄选好谜货，下单不迷惑
				</view>
				<navigator hover-class="on" url="/pages/goods/category"  class="more">查看全部 <image :src="`${$imgurl}/static/icon-a.png`" mode=""></image> </navigator>
			</view>
			<my-good-list :list="product"></my-good-list>
		</view>
		
	</view>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onPageScroll} from "@dcloudio/uni-app"
	import {getProducts,getCategory} from "@/api/products.js"
	import {getBannerListApi} from "@/api/public.js"
	const banner=ref([])
	const scrollTop=ref(0)
	const product=ref([])
	const category=ref([])
	onPageScroll((e)=>{
		if(e.scrollTop>=30){
			scrollTop.value=30
		}else{
			scrollTop.value=e.scrollTop/3
		}
	})
	onLoad(async ()=>{
		try {
			let res=await getProducts()
			let re= await getCategory();
			let bannerRes= await getBannerListApi();
			product.value=res.data
			category.value=re.data.slice(0,9)
			banner.value=bannerRes.data.top_banner
		} catch (error) {
			//TODO handle the exception
		}
	})
	const goTab=(url,type)=>{
		uni.setStorageSync('tabIndex',type)
		uni.switchTab({
			url:url
		})
	}
</script>

<style lang="scss">
	
	.search-box{
		background: rgba(255, 255, 255, .5);
		padding:4rpx;
		border-radius: 90rpx;
		.search{
			display: flex;
			background-color: #fff;
			border-radius: 90rpx;
			align-items: center;
			padding-left: 20rpx;
			image{
				width:32rpx;height: 32rpx;
			}
			input{
				flex:1;line-height: 64rpx;
				height:64rpx;
				font-size: 28rpx;
				margin-left:20rpx;
			}
			.btn{
				margin-left:20rpx;
				width: 120rpx;
				border-radius: 90rpx;
				text-align: center;
				background: linear-gradient(to left,#FF407A,#FF4026);
				line-height: 64rpx;
				font-weight: bold;
				color:#fff;
				font-size: 30rpx;
			}
		}
	}
	.swiper-box{
		margin-top: 24rpx;
	}
	.nav-box{
		display: flex;
		flex-wrap: wrap;
		gap: 40rpx;
		margin-top:40rpx;
		.item{
			width:106rpx;
			line-height: 1;
			font-size: 26rpx;
			text-align: center;
			image{
				width:96rpx;
				height:96rpx;
				display: block;
				margin:0 auto;
				margin-bottom: 20rpx;
			}
		}
	}
	.wanfa-box{
		height:532rpx;
		margin-top:40rpx;
		padding-top:92rpx;
		.row{
			display: flex;line-height: 1;margin-top:16rpx;
			padding:0 20rpx;
			
			&:nth-child(1){
				margin-top:0;
				.left{
					color:#FF435C;
					.span{
						color:#FF6775;
						border: 1rpx solid #F5959D;
					}
				}
				.right{
					color:#FFE5E7;
					.span{
						
						border: 1rpx solid #FFA2A7;
					}
				}
			}
			&:nth-child(2){
				.left{
					color:#7C3ECC;
					.span{
						border: 1rpx solid #7C3ECC;
					}
				}
				.right{
					color:#F7E5FF;
					.span{
						border: 1rpx solid #F7E5FF;
					}
				}
			}
			&:nth-child(3){
				.left{
					color:#F64A00;
					.span{
						color:#D8AB8F;
						border: 1rpx solid #D8AB8F;
					}
				}
				.right{
					color:#FFF9B2;
					.span{
						border: 1rpx solid #FFF9B2;
					}
				}
			}
			.span{
				font-size: 22rpx;
				line-height: 36rpx;
				border-radius: 80rpx;
				border:1rpx solid #9CC8E8;
				display: inline-block;
				padding:0 16rpx;
				margin-top:16rpx;
			}
			.left{
				width:384rpx;
				box-sizing: border-box;
				padding:24rpx 30rpx;
				.h1{font-weight: bold;font-size: 28rpx;}
				
			}
			.right{
				flex:1;
				margin-left:16rpx;
				padding-top:26rpx;
				padding-left:26rpx;
				image{
					height:26rpx;
					max-width: 300rpx;
				}
			}
		}
	}
	.mhzq-box{
		margin-top:40rpx;
		.title{
			display: flex;justify-content: space-between;align-items: center;
			.left{
				display: flex;align-items: center;
				font-size: 24rpx;
				color:#EA4E37;
				image{
					width:135rpx;height:32rpx;margin-right: 26rpx;
				}
			}
			.more{
				display: flex;color: #9BA2AB;font-size:24rpx;align-items: center;
				image{
					width:12rpx;height:20rpx;margin-left:8rpx;
				}
			}
		}
		
	}
</style>
